<template>
    <div id="container">
        <div class="left-chart aside-chart">
            <chart-list :chartList="leftList"> </chart-list>
        </div>

        <div class="right-chart aside-chart">
            <chart-list :chartList="rightList"> </chart-list>
        </div>
        <div class="title-one">禄丰市紧密型医共体</div>
        <!-- <div class="title-two">禄丰市各医院收入、门诊、住院情况</div> -->
        <!-- <bottom-table class="middle-bottom-chart"></bottom-table> -->
        <div class="copyright">江苏世轩科技股份有限公司© v3.0.0</div>
    </div>
</template>
<script>
import chartList from "../components/chartList.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { SCHEDULED_SCROLLING_TASK } from "../commonJs/config";
import axios from "../commonJs/request";
export default {
    name: "views",
    components: {
        chartList,
    },
    data() {
        return {
            map: null,
            leftList: [],
            rightList: [],
            index: 0,
        };
    },
    /* eslint-disable */
    created() {
        // this.getIncome();
        this.initMap();
        this.leftList = [
            {
                name: "门诊总人数/占比",
                url: "total",
            },
            {
                name: "近7日患者医院分布",
                url: "outpatient",
            },
            {
                name: "近7日患者就诊科室",
                url: "management",
            },
        ];
        this.rightList = [
            {
                name: "医护数量统计",
                url: "inpatients",
            },
            {
                name: "近7日药品消耗",
                url: "operationIndex",
            },
            {
                name: "近7日病种曲线",
                url: "overview",
            },
        ];

        setInterval(() => {
            this.index = 2;
            // this.index++;
            this.changeList();
        }, SCHEDULED_SCROLLING_TASK * 1000);
    },

    methods: {
        initMap(jsonData) {
            AMapLoader.load({
                key: "602016d9a79837a263d200af109445bf	", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                Loca: {
                    version: "2.0.0",
                },
            })
                .then((AMap) => {
                    // window.AMap = AMap;
                    this.map = new AMap.Map("container", {
                        //设置地图容器id
                        viewMode: "3D", //是否为3D地图模式
                        zoom: 11.2, //初始化地图级别
                        center: ["102.0160531", "25.1551337"], //初始化地图中心点位置
                        //   center: [116.597005,39.914388],
                        mapStyle: "amap://styles/grey", //地图风格
                        // mapStyle:
                        //     "amap://styles/0527458982faa051cc0bd48055544ba8",
                        pitch: 40,
                        showLabel: false,
                    });

                    // let geoJSON = require("../assets/json/lf.json");
                    // let geojson = new AMap.GeoJSON({
                    //     geoJSON: geoJSON,
                    //     // 还可以自定义getMarker和getPolyline
                    //     getPolyline: (geoJSON, lnglats) => {
                    //         // 计算面积
                    //         var area = AMap.GeometryUtil.ringArea(lnglats[0]);
                    //         return new AMap.Polygon({
                    //             path: lnglats,
                    //             fillOpacity: 0.4, // 面积越大透明度越高
                    //             strokeColor: "rgba(190, 161, 58, 1)",
                    //             strokeWeight: 1,
                    //             fillColor: "rgba(151 ,255 ,255,.2)",
                    //         });
                    //     },
                    // });
                    // geojson.setMap(this.map);

                    // this.setMarker(AMap);
                    // var loca = new Loca.Container({
                    //     map: this.map,
                    // });

                    // var geo = new Loca.GeoJSONSource({
                    //     data: jsonData,
                    // });

                    // var pl = new Loca.PrismLayer({
                    //     zIndex: 10,
                    //     opacity: 1,
                    //     visible: false,
                    //     hasSide: true,
                    // });

                    // // eslint-disable-next-line
                    // var geo = new Loca.GeoJSONSource({
                    //     data: require("../assets/json/info.json"),
                    // });
                    // pl.setSource(geo);
                    // // top3 的城市增加文字
                    // // var topConf = {
                    // //     人民医院:
                    // //         "https://a.amap.com/Loca/static/loca-v2/demos/images/top-one.png",
                    // //     二院: "https://a.amap.com/Loca/static/loca-v2/demos/images/top-two.png",
                    // //     中医院: "https://a.amap.com/Loca/static/loca-v2/demos/images/top-three.png",
                    // // };
                    // pl.setStyle({
                    //     unit: "meter",
                    //     sideNumber: 32,
                    //     topColor: (index, f) => {
                    //         var n = f.properties["income"];
                    //         return "rgba(0,244,255,0.3)";
                    //     },

                    //     sideBottomColor: "#002bb9",
                    //     radius: 800,
                    //     height: (index, f) => {
                    //         var props = f.properties;
                    //         var height = 0;
                    //         this.map.add(
                    //             new AMap.Marker({
                    //                 anchor: "bottom-center",
                    //                 position: [
                    //                     f.coordinates[0],
                    //                     f.coordinates[1],
                    //                     height,
                    //                 ],
                    //                 content:
                    //                     '<div style="margin-bottom: 10px; float: left; font-size: 14px;height: 57px; width: 180px; color:#fff; background: no-repeat url(https://a.amap.com/Loca/static/loca-v2/demos/images/top-one.png); background-size: 100%;"><p style="margin: 7px 0 0 35px; height: 20px; line-height:20px;">' +
                    //                     props["name"] +
                    //                     "</p>" +
                    //                     '<p style="margin: 4px 0 0 35px; height: 20px; line-height:20px; color: #00a9ff; font-size: 13px;">昨日收入：' +
                    //                     props["income"] +
                    //                     " 元" +
                    //                     "</p></div>",
                    //             })
                    //         );

                    //         return height;
                    //         // return 60000 + n * 100;
                    //     },
                    //     rotation: 360 * 100,
                    //     altitude: 0,
                    // });
                    // loca.add(pl);
                    // this.map.on("complete", function () {
                    //     setTimeout(function () {
                    //         pl.show(500);
                    //     }, 800);
                    // });
                    // // loca.animate.start();

                    // // 浮动三角
                    // var triangleZMarker = new Loca.ZMarkerLayer({
                    //     loca: loca,
                    //     zIndex: 119,
                    // });
                    // triangleZMarker.setSource(geo);
                    // triangleZMarker.setStyle({
                    //     content: (i, feat) => {
                    //         return (
                    //             '<div style="width: 120px; height: 120px; background: url(https://a.amap.com/Loca/static/loca-v2/demos/images/triangle_' +
                    //             (feat.properties.income < 60000
                    //                 ? "blue"
                    //                 : "yellow") +
                    //             '.png);"></div>'
                    //         );
                    //     },
                    //     unit: "meter",
                    //     rotation: 360 * 100,
                    //     alwaysFront: true,
                    //     size: [3000, 3000],
                    //     altitude: 15,
                    // });

                    // // 启动帧
                    // loca.animate.start();
                })
                .catch((e) => {
                    console.log(e);
                });
        },

        setMarker(AMap) {
            for (let i = 0; i < this.lnglats.length; i++) {
                var marker = new AMap.Marker({
                    position: this.lnglats[i].value,
                    anchor: "bottom-center",
                    offset: new AMap.Pixel(0, 0),
                });
                marker.setMap(this.map);
                marker.setTitle("我是marker的title");
                marker.setLabel({
                    direction: "right",
                    offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
                    content: `<div class='info'>${this.lnglats[i].name}</div>
                        <div class='info'>${this.lnglats[i].value}</div>`, //设置文本标注内容
                });
            }
        },

        //昨日收入
        // getIncome() {

        //     axios
        //         .get("bi/income?day=1")
        //         .then((res) => {
        //             let jsonData = require("../assets/json/info.json");
        //             if (res.data) {
        //                 //tempData
        //                 let temp = 0;
        //                 let temp2 = 0;
        //                 res.data.data.forEach((item) => {
        //                     jsonData.features.forEach((ele) => {
        //                         if (item.HOS_ID == ele.properties.id) {
        //                             ele.properties.income = Math.round(
        //                                 item.INCOME
        //                             );
        //                             //tempData
        //                             if (item.HOS_ID == "9441") {
        //                                 temp = Math.round(item.INCOME);
        //                             } else if (item.HOS_ID == "6441") {
        //                                 temp2 = Math.round(item.INCOME);
        //                             }
        //                         }
        //                     });
        //                 });
        //                 //tempData
        //                 jsonData.features.forEach((ele) => {
        //                     if (ele.properties.divisionLevel == "乡镇级") {
        //                         console.log(ele);
        //                         ele.properties.income = Math.round(temp * 0.1);
        //                     } else if (ele.properties.id == "2914") {
        //                         ele.properties.income = temp + temp2;
        //                     }
        //                 });
        //             }
        //             this.initMap(jsonData);
        //         })
        //         .catch((err) => {
        //             console.log(err);
        //         });
        // },

        //当切换大屏时，变换两侧图表
        changeList() {
            switch (this.index) {
                case 0:
                    this.leftList = [
                        {
                            name: "门诊总人数/占比",
                            url: "total",
                        },
                        {
                            name: "近7日患者医院分布",
                            url: "outpatient",
                        },
                        {
                            name: "近7日患者就诊科室",
                            url: "management",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "医护数量统计",
                            url: "inpatients",
                        },
                        {
                            name: "近7日药品消耗",
                            url: "operationIndex",
                        },
                        {
                            name: "近7日流行病曲线",
                            url: "overview",
                        },
                    ];
                    break;
                case 1:
                    this.leftList = [
                        {
                            name: "门诊总人数/占比",
                            url: "total",
                        },
                        {
                            name: "近7日医保统筹占比",
                            url: "medicalInsurance",
                        },
                        {
                            name: "近7日医院收入",
                            url: "income",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "医护数量统计",
                            url: "inpatients",
                        },
                        {
                            name: "近7日医院收入占比",
                            url: "incomePrecent",
                        },
                        {
                            name: "近7日结算方式",
                            url: "operationIncome",
                        },
                    ];
                    break;
                case 2:
                    this.leftList = [
                        {
                            name: "门诊总人数/占比",
                            url: "total",
                        },
                        {
                            name: "近7日转诊量",
                            url: "referralVolume",
                        },
                        {
                            name: "近7日远程会诊人次",
                            url: "remotePeople",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "医护数量统计",
                            url: "inpatients",
                        },
                        {
                            name: "近7日入院/出院人数",
                            url: "hospitalPeople",
                        },
                        {
                            name: "出院人数历史",
                            url: "leaveHistory",
                        },
                    ];
                    break;
            }
            if (this.index == 2) {
                this.index = -1;
            }
        },
    },
};
</script>
<style lang="scss">
#container {
    height: 100%;
    position: relative;
    .aside-chart {
        width: 500px;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 99;
        &.left-chart {
            left: 0;
        }
        &.right-chart {
            left: 1420px;
        }
    }
    .title-one {
        z-index: 99;
        position: absolute;
        font-size: 50px;
        font-weight: bold;
        top: 10px;
        left: 770px;
        color: rgb(180, 180, 190);
        background:url('../assets/image/mainView/top.png');
    }
    .title-two {
        z-index: 99;
        position: absolute;
        font-size: 30px;
        font-weight: bold;
        top: 80px;
        left: 500px;
        color: rgb(150, 150, 150);
    }

    .copyright {
        z-index: 99;
        position: absolute;
        bottom: 10px;
        left: 880px;
        color: #fff;
    }
    .middle-bottom-chart {
        width: 100%;
        height: 434px;
        z-index: 99;
    }
    .amap-marker-label {
        background-color: transparent;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        border: none;
        .info {
            height: 25px;
        }
    }
}
</style>
